// 这个文件你就去提供路由规则, 不要干别的事,
// 路由前置守卫不要放在这

// 这个方式是上来就直接加载!!!
import Vue from 'vue'

// 这个方式, 将来是只有import函数调用时才会加载
// const Vue = import('vue')

import Router from 'vue-router'

// 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

// 动态路由表 => 动态路由(需要权限控制的) 我们这里准备一个数组存放
export const asyncRoutes = [
  departmentsRouter,
  settingRouter,
  employeesRouter,
  permissionRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]

Vue.use(Router)

/* Layout */
// 不采用懒加载, 大部分的组件都需要这个作为架子,
import Layout from '@/layout'

// export const myRoutes = [
//   {path: '/login', component: Login}
// ]

//  const router = new Router({
//   routes: myRoutes
// })

// import Login from '@/views/login/index.vue'
// import Login1 from '@/views/login/index.vue'
// import Login2 from '@/views/login/index.vue'
// import Login3 from '@/views/login/index.vue'
// import Login4 from '@/views/login/index.vue'
// 这种组件的导入方式, 是直接加载的!
// 将来用户一进入你的系统, 代码执行, 所有的组件全部加载进来, 你才会看到页面, 首屏加载速度慢;
// 优化用户体验, 缩小首屏加载时间, 希望 用户看了哪个组件, 只加载那个组件 => 路由懒加载
// 结论: 如果你希望你的组件变懒 => 到我上场, 我才加载 =>
// () => import('@/views/login/index')
// import Approvals from '@/views/approvals'

// 静态路由, 不需要权限控制的
export const constantRoutes = [
  // 定义路由规则
  // 一级路由  login 404..
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  // 首页的一级路由 且他有二级路由
  // 首页模块
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },

  // 匹配导入页的规则
  {
    path: '/import',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '',
        component: () => import('@/views/import')
      }
    ]
  }

  // 这个匹配任意规则 , 配合上面的404规则一起使用
  // 因为这里的匹配任意 不是在最后, 所以会导致刷新404, 临时注释,回头再加
  // { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => {
  return new Router({
    // 路由模式设置成历史模式, 优势: 不带#; 劣势: 后端需要额外配置
    mode: 'history', // 需要后端支持
    scrollBehavior: () => ({ y: 0 }), // 想要页面滚到顶部
    // 我们这里是因为作为开发者, 要看到最好的效果以及需要开发对应的组件, 临时将动态路由, 静态路由合并, => 默认开房所有的权限
    routes: [
      ...constantRoutes
      // ...asyncRoutes
    ]
  })
}

// 这里得到的就是我们的路由实例router 设置路由前置守卫
const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
// 重置路由(最后的目标: 路由实例还是老的那个, 但是路由匹配规则对象已经被重置)
export function resetRouter() {
  const newRouter = createRouter() // 重新new 路由实例
  router.matcher = newRouter.matcher // 拿着新路由实例的路由匹配对象 替换了 老的路由实例匹配规则对象
}

export default router

// 页面访问权的控制思路(核心控制页面的路由)
// 1.取消动态路由和静态路由的临时合并
// 2.分析: 应该是基于用户信息里面的menus 去挑选asyncRoutes里面的动态路由 (封装到了一个action)
// 3. 调用action, 拿到属于自己的动态路由, addRoutes(...)
